@mixin mixinClearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}
// 滚动条样式
@mixin mixinScrollBar($bg) {
  &::-webkit-scrollbar-track-piece {
    background:$bg;
  }

  &::-webkit-scrollbar {
    width: $scrollbar-width;
    height:  $scrollbar-width;
  }

  &::-webkit-scrollbar-thumb {
    background-color: $scrollbar-bg;
		background-clip: padding-box;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
  }
}
@mixin mixinRelative {
  position: relative;
  width: 100%;
  height: 100%;
}


// 超出范围显示省略号
@mixin mixinEllipsis  {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
// 显示几行后显示省略号
@mixin mixinEllipsisLength($Length) {
        overflow: hidden;
        text-overflow: ellipsis;
        /* 超出部分省略号 */
        display: -webkit-box;
        /** 对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical;
        /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-line-clamp: $Length;
        /** 显示的行数 **/
}

@mixin mixinPct($pct) {
  width: #{$pct};
  position: relative;
  margin: 0 auto;
}

@mixin mixinTriangle($width, $height, $color, $direction) {
  $width: $width/2;
  $color-border-style: $height solid $color;
  $transparent-border-style: $width solid transparent;
  height: 0;
  width: 0;

  @if $direction==up {
    border-bottom: $color-border-style;
    border-left: $transparent-border-style;
    border-right: $transparent-border-style;
  }

  @else if $direction==right {
    border-left: $color-border-style;
    border-top: $transparent-border-style;
    border-bottom: $transparent-border-style;
  }

  @else if $direction==down {
    border-top: $color-border-style;
    border-left: $transparent-border-style;
    border-right: $transparent-border-style;
  }

  @else if $direction==left {
    border-right: $color-border-style;
    border-top: $transparent-border-style;
    border-bottom: $transparent-border-style;
  }
}


// 字体颜色
.cor-main {
  color: $navBar-bg;
}
.cor-00 {
  color: #000;
}
.cor-alp-00-25 {
  color: rgba(0, 0, 0, 0.45);
}
.cor-alp-00-45 {
  color: rgba(0, 0, 0, 0.45);
}
.cor-alp-00-50 {
  color: rgba(0, 0, 0, 0.5);
}
.cor-alp-00-65 {
  color: rgba(0, 0, 0, 0.65);
}
.cor-alp-00-85 {
  color: rgba(0, 0, 0, 0.85);
}
.cor-FF {
  color: #fff;
}
.cor-33 {
  color: #333;
}
.cor-8C {
  color: #8c8c8c;
}
.cor-66 {
  color: #666666;
}
.cor-99 {
  color: #999;
}
.cor-0091FF {
  color: #0091ff;
}
.cor-F7B500 {
  color: #f7b500;
}
.cor-262522 {
  color: #262522;
}
.cor-E02020 {
  color: #e02020;
}
.cor-1677FF {
  color: #1677ff;
}
.cor-52C41A {
  color: #52c41a;
}
.cor-E63F07 {
  color: #e63f07;
}
.cor-44D7B6 {
  color: #44d7b6;
}
.cor-F7B500 {
  color: #f7b500;
}
.cor-6DD400 {
  color: #6dd400;
}
.cor-FFBA12 {
  color: #FFBA12;
}
.cor-E1251B {
  color: #E1251B;
}
.cor-68A8EF {
  color: #68A8EF;
}
.cor-E4F3FF {
  color: #E4F3FF;
}
.cor-32C5FF {
  color: #32C5FF;
}
.cor-D8F0FF{
  color: #D8F0FF;
}
.cor-E3F9FF{
  color: #E3F9FF;
}

// 主背景
.bg-main {
  background: $navBar-bg;
}
.bg-hui-main {
  background: $primary-mian-bg;
}
.bg-FF {
  background: #fff;
}

.bg-EE {
  background: #EEE;
}
//
.bg-E6F4FF {
  background: #e6f4ff;
}
.bg-EAF3FF {
  background: #eaf3ff;
}
// ----
.bg-1677FF {
  background: #1677ff;
}
.bg-FFF7E3 {
  background: #fff7e3;
}
.bg-0091FF {
  background: #0091ff;
}
.bg-F6F7FB {
  background: #f6f7fb;
}
.bg-E4EDFE {
  background: #e4edfe;
}
.bg-EAF3FF {
  background: #eaf3ff;
}
.bg-F3FAFF {
  background: #f3faff;
}
.bg-E63C2E {
  background: #E63C2E;
}
.bg-1890FF {
  background: #1890ff;
}
.bg-D1E9FE{
  background: #D1E9FE;
}
.bg-6DD400 {
  background: #6dd400;
}
.bg-F7B500 {
  background: #f7b500;
}
.bg-32C5FF{
  background: #32C5FF;
}
.bg-44D7B6 {
  background: #44D7B6;
}
.bg-B620E0 {
  background: #B620E0;
}
.bg-FA6400 {
  background: #FA6400;
}


//
.bg-alp-00-02 {
  background: rgba($color: #000000, $alpha: 0.02);
}

.bg-alp-00-04 {
  background: rgba($color: #000000, $alpha: 0.04);
}

.bg-alp-00-10 {
  background: rgba($color: #000000, $alpha: 0.1);
}

.bg-alp-00-50{
  background: rgba($color: #000000, $alpha: 0.5);
}

.bg-alp-00-70 {
  background: rgba($color: #000000, $alpha: 0.7);
}
.bg-alp-FF-12{
  background: rgba($color: #FFFFFF, $alpha: 0.12);
}


/*边框 */
@for $i from 0 through 40 {
  @each $short,
  $long in l left,  t top,  r right,  b bottom {
    @each $style in solid,double,dashed,dotted {
      .bor-#{$short}-#{$style}-#{$i}{
        border-#{$long}-style: $style;
        border-width: #{$i} +px!important;
        border-color:$primary-border-color
      }
      .bor-#{$style}-#{$i}{
        border-style: $style;
        border-width: #{$i} + px!important;
        border-color:$primary-border-color
      }
      // 主色调 边框
      .bor-main-#{$short}-#{$style}-#{$i}{
        border-#{$long}-style: $style;
        border-width: #{$i} + px!important;
        border-color:$navBar-bg;
      }
      .bor-main-#{$style}-#{$i}{
        border-style: $style;
        border-width: #{$i} + px!important;
        border-color:$navBar-bg;
      }
    }
  }
}

.m-auto {
  margin: 0 auto;
}

.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.col-center {
  align-items: center;
}

.col-top {
  align-items: flex-start;
}

.col-bottom {
  align-items: flex-end;
}

.col-baseline {
  align-items: baseline;
}

.row-center {
  justify-content: center;
}

.row-left {
  justify-content: flex-start;
}

.row-right {
  justify-content: flex-end;
}

.row-between {
  justify-content: space-between;
}

.row-around {
  justify-content: space-around;
}

.cursor-pointer {
  cursor: pointer;
}

/* 定义flex等分 */
@for $i from 0 through 12 {
  .flex-#{$i},
  .u-flex-#{$i} {
    flex: $i;
  }
}

/* 宽度 高度 圆角 % */
$list: (
  (    title: '10',    con: 10%,  ),
  (    title: '11',    con: 11%,  ),
  (    title: '12',    con: 12%,  ),
  (    title: '13',    con: 13%,  ),
  (    title: '14',    con: 14%,  ),
  (    title: '15',    con: 15%,  ),
  (    title: '16',    con: 16%,  ),
  (    title: '17',    con: 17%,  ),
  (    title: '18',    con: 18%,  ),
  (    title: '19',    con: 19%,  ),
  (    title: '20',    con: 20%,  ),
  (    title: '21',    con: 21%,  ),
  (    title: '22',    con: 22%,  ),
  (    title: '23',    con: 23%,  ),
  (    title: '24',    con: 24%,  ),
  (    title: '25',    con: 25%,  ),
  (    title: '26',    con: 26%,  ),
  (    title: '27',    con: 27%,  ),
  (    title: '28',    con: 28%,  ),
  (    title: '29',    con: 29%,  ),
  (    title: '30',    con: 30%,  ),
  (    title: '31',    con: 31%,  ),
  (    title: '32',    con: 32%,  ),
  (    title: '33',    con: 33%,  ),
  (    title: '34',    con: 34%,  ),
  (    title: '35',    con: 35%,  ),
  (    title: '36',    con: 36%,  ),
  (    title: '37',    con: 37%,  ),
  (    title: '38',    con: 38%,  ),
  (    title: '39',    con: 39%,  ),
  (    title: '40',    con: 40%,  ),
  (    title: '41',    con: 41%,  ),
  (    title: '42',    con: 42%,  ),
  (    title: '43',    con: 43%,  ),
  (    title: '44',    con: 44%,  ),
  (    title: '45',    con: 45%,  ),
  (    title: '46',    con: 46%,  ),
  (    title: '47',    con: 47%,  ),
  (    title: '48',    con: 48%,  ),
  (    title: '49',    con: 49%   ),
  (    title: '50',    con: 50%,  ),
  (    title: '51',    con: 51%,  ),
  (    title: '52',    con: 52%,  ),
  (    title: '53',    con: 53%,  ),
  (    title: '54',    con: 54%,  ),
  (    title: '55',    con: 55%,  ),
  (    title: '56',    con: 56%,  ),
  (    title: '57',    con: 57%,  ),
  (    title: '58',    con: 58%,  ),
  (    title: '59',    con: 59%,  ),
  (    title: '60',    con: 60%,  ),
  (    title: '61',    con: 61%,  ),
  (    title: '62',    con: 62%,  ),
  (    title: '63',    con: 63%,  ),
  (    title: '64',    con: 64%,  ),
  (    title: '65',    con: 65%,  ),
  (    title: '66',    con: 66%,  ),
  (    title: '67',    con: 67%,  ),
  (    title: '68',    con: 68%,  ),
  (    title: '69',    con: 69%,  ),
  (    title: '70',    con: 70%,  ),
  (    title: '71',    con: 71%,  ),
  (    title: '72',    con: 72%,  ),
  (    title: '73',    con: 73%,  ),
  (    title: '74',    con: 74%,  ),
  (    title: '75',    con: 75%,  ),
  (    title: '76',    con: 76%,  ),
  (    title: '77',    con: 77%,  ),
  (    title: '78',    con: 78%,  ),
  (    title: '79',    con: 79%,  ),
  (    title: '80',    con: 80%,  ),
  (    title: '81',    con: 81%,  ),
  (    title: '82',    con: 82%,  ),
  (    title: '83',    con: 83%,  ),
  (    title: '84',    con: 84%,  ),
  (    title: '85',    con: 85%,  ),
  (    title: '86',    con: 86%,  ),
  (    title: '87',    con: 87%,  ),
  (    title: '88',    con: 88%,  ),
  (    title: '89',    con: 89%,  ),
  (    title: '90',    con: 90%,  ),
  (    title: '91',    con: 91%,  ),
  (	   title: '92',    con: 92%,  ),
  (    title: '93',    con: 93%,  ),
  (    title: '94',    con: 94%,  ),
  (    title: '95',    con: 95%,  ),
  (    title: '96',    con: 96%,  ),
  (    title: '97',    con: 97%,  ),
  (    title: '98',    con: 98%,  ),
  (    title: '99',    con: 99%,  ),
  (    title: '100',   con: 100%,  )
);
/* 宽度  % */
@for $i from 1 through length($list) {
  $item: nth($list, $i);
  $title: map-get($map: $item,$key: title,);
  $con: map-get($map: $item,$key: con,);
  .width-#{$title} {
    width: $con;
  }
}

/* 最小宽度  % */
// @for $i from 1 through length($list)  {
//     $item: nth($list, $i);
//     $title : map-get($map: $item, $key: title );
//     $con: map-get($map: $item, $key: con );
//     .min-width-#{$title}{
//         min-width: $con;
//     }
// }

/* 最大宽度  % */

// @for $i from 1 through length($list)  {
//     $item: nth($list, $i);
//     $title : map-get($map: $item, $key: title );
//     $con: map-get($map: $item, $key: con );
//     .max-width-#{$title}{
//         max-width: $con;
//     }
// }

/* 宽度  px */
@for $i from 1 through 400 {
  .w-px-#{$i} {
    width: $i + px;
  }
  .w-rem-#{$i} {
    width: ($i/10) + rem;
  }
}

/* 最小宽度  px */
 @for $i from 1 through 400 {
  .min-w-px-#{$i} {
      min-width: $i + px;
  }
  .min-w-rem-#{$i} {
    min-width: ($i/10) + rem;
  }
 }

/* 高度  px */
@for $i from 1 through 400 {
  .h-px-#{$i} {
    height: $i + px !important;
  }
  .h-rem-#{$i} {
    height: ($i/10) + rem !important;
  }
}

/* 高度  vh */
@for $i from 10 through 100 {
  .h-vh-#{$i} {
    height: $i + vh;
  }
}

/* 高度  % */
@for $i from 1 through length($list) {
  $item: nth($list, $i);
  $title: map-get($map: $item,$key: title,);
  $con: map-get($map: $item,$key: con,);
  .height-#{$title} {
    height: $con!important;
  }
}

/* 最小高度  vh */
@for $i from 10 through 100 {
  .min-h-vh-#{$i} {
    min-height: $i + vh;
  }
}

/* 最小高度  px */
// @for $i from 1 through 400 {
// 	.min-h-px-#{$i} {
// 		min-height: $i + px;
// 	}
// 	.min-h-rem-#{$i} {
// 		min-height: ($i/10) + rem;
// 	}
// }

/* 最大高度  vh */
// @for $i from 10 through 100 {
// 	.max-h-vh-#{$i} {
// 		max-height: $i + vh;
// 	}
// }

/* 最大高度  px */
@for $i from 1 through 200 {
  @if $i % 2 == 0 or $i % 5 == 0 {
    .max-h-px-#{$i} {
      max-height: $i + px;
    }
    .max-h-rem-#{$i} {
      max-height: ($i/10) + rem;
    }
  }
}

/* 行高  px */
@for $i from 1 through 200 {
  @if $i % 2==0 or $i % 5==0 {
    .l-h-px-#{$i} {
      line-height: $i + px !important;
    }
    .l-h-rem-#{$i} {
      line-height: ($i/10) + rem !important;
    }
  }
}

/* 圆角  % */
@for $i from 1 through length($list) {
  $item: nth($list, $i);
  $title: map-get($map: $item,$key: title,);
  $con: map-get($map: $item,$key: con,);
  .border-#{$title} {
    border-radius: $con;
  }
}
/* 圆角  px */
@for $i from 0 through 200 {
    // px
    .b-r-px-#{$i} {
      border-radius: $i + px;
    }
	.b-tl-r-px-#{$i} {
		border-top-left-radius: $i + px;
	}
	.b-tr-r-px-#{$i} {
		border-top-right-radius: $i + px;
	}
	.b-bl-r-px-#{$i} {
		border-bottom-left-radius: $i + px;
	}
	.b-br-r-px-#{$i} {
		border-bottom-right-radius: $i + px;
	}
    // rem
    .b-r-rem-#{$i} {
      border-radius: ($i/10) + rem;
    }
    .b-tl-r-rem-#{$i} {
      border-top-left-radius: ($i/10) + rem;
    }
    .b-tr-r-rem-#{$i} {
      border-top-right-radius: ($i/10) + rem;
    }
    .b-bl-r-rem-#{$i} {
      border-bottom-left-radius: ($i/10) + rem;
    }
    .b-br-r-rem-#{$i} {
      border-bottom-right-radius: ($i/10) + rem;
    }
}


/* 透明度 */
@for $i from 0 through 100 {
  .opacity-#{$i} {
    opacity: $i/100;
  }
}

/* 文字大小 rem */
@for $i from 10 through 100 {
  .font-px-#{$i} {
    font-size: $i + px!important;
  }
  .font-rem-#{$i} {
    font-size: ($i/10) + rem !important;
  }
}

/* 文字间距  rem */
@for $i from 1 through 20 {
  @if $i % 2==0 {
    .letter-px-#{$i} {
      letter-spacing: $i + px;
    }
    .letter-rem-#{$i} {
      letter-spacing: ($i/10) + rem;
    }
  }
}

/* 字体 加粗 */
$weight: 100, 200, 300, 400, 500, 600, 700, 800, 900, bold;
@each $i in $weight {
  .font-weight-#{$i} {
    font-weight: $i;
  }
}

/* 文字 隐藏 */
.ellipsis-1  {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
@for $i from 2 through 8 {
  .ellipsis-#{$i} {
    overflow: hidden;
    text-overflow: ellipsis;
    /* 超出部分省略号 */
    display: -webkit-box;
    /** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical;
    /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: $i;
    /** 显示的行数 **/
  }
}

/*  text-decoration 文字 装饰
    none            定义标准的文本。
    underline	    定义文本下的一条线。
    overline	    定义文本上的一条线。
    line-through	定义穿过文本下的一条线。
    blink	        定义闪烁的文本。
*/

$textdecorationlist: none, underline, overline, line-through, blink;
@each $i in $textdecorationlist {
  .text-#{$i} {
    text-decoration: $i;
  }
}

/* 文字 位置  */
$textpositionlist:[left,center,right,justify];
@each $i in $textpositionlist {
    .text-#{$i} {
        text-align: $i
    }
}
/* 定位  */
.sticky {
  position: sticky;
}

.relative,
.rela {
  position: relative;
}

.absolute,
.abso {
  position: absolute;
}

.fixed {
  position: fixed;
}

/* 定位 top left bottom right */
.pos-0 {
  top: 0rem;
  left: 0rem;
  right: 0rem;
  bottom: 0rem;
}
// 动态 取类名：外边框，内边框，绝对定位
@for $i from 0 through 400 {
	// 只要双数和能被5除尽的数
	// @if $i % 2==0 or $i % 5==0 {
			@if($i < 200) {
                // px
                .m-px-#{$i} {
                  margin: $i + px!important;
                }
                .p-px-#{$i} {
                  padding: $i + px!important;
                }

                // rem
                .m-rem-#{$i} {
                  margin: ($i/10) + rem!important;
                }
                .p-rem-#{$i} {
                  padding: ($i/10) + rem!important;
                }
			}
			@each $short,
			$long in l left,
			t top,
			r right,
			b bottom {
              /* 正数 px */
              .m-px-#{$short}-#{$i} {
                margin-#{$long}: $i + px!important;
              }
              .p-px-#{$short}-#{$i} {
                padding-#{$long}: $i + px!important;
              }
              /* 负数 px */
              .m-px-neg-#{$short}-#{$i} {
                margin-#{$long}: -$i + px!important;
              }
              .p-px-neg-#{$short}-#{$i} {
                padding-#{$long}: -$i + px!important;
              }

              /* 正数 rem */
              .m-rem-#{$short}-#{$i} {
                margin-#{$long}: ($i/10) + rem!important;
              }
              .p-rem-#{$short}-#{$i} {
                padding-#{$long}:($i/10) + rem!important;
              }
              /* 负数 rem */
              .m-rem-neg-#{$short}-#{$i} {
                margin-#{$long}: -($i/10) + rem!important;
              }
              .p-rem-neg-#{$short}-#{$i} {
                padding-#{$long}: -($i/10) + rem!important;
              }


              // 绝对定位
              .ab-#{$short}-#{$i}{
                  position: absolute;
                  #{$long}: ($i/10) + rem!important;
              }
              .ab-px-#{$short}-#{$i}{
                  position: absolute;
                  #{$long}: $i + px!important;
              }
              // 负数
              .ab-neg-#{$short}-#{$i}{
                  position: absolute;
                  #{$long}: -($i/10) + rem!important;
              }
              .ab-neg-px-#{$short}-#{$i}{
                  position: absolute;
                  #{$long}: -$i+ px!important;
              }
                  //百分比
              .ab-pre-#{$short}-#{$i}{
                  position: absolute;
                  #{$long}: #{$i} + '%'!important;
              }

              /* 正数 位置 top left right bottom */
              .pos-px-#{$short}-#{$i} {
                  #{$long}: $i + px!important;
              }
              .pos-rem-#{$short}-#{$i} {
                #{$long}: ($i/10) + rem!important;
              }
              /* 负数 位置 top left right bottom */
              .pos-px-neg-#{$short}-#{$i} {
                  #{$long}: -$i + px!important;
              }
              .pos-rem-neg-#{$short}-#{$i} {
                #{$long}: -($i/10) + rem!important;
              }

		  }
//  }
}

/* 层级 */
$Zindex: 0, 9, 99, 999, 9999;
@each $i in $Zindex {
  .z-#{$i} {
    z-index: $i;
  }
}


/* display
    none	隐藏 。
    block	显示 、块元素。
    inline   行内元素。
    inline-block  行内块元素。
*/
$displaylist: (
  ( title: 'n', con: none, ),
  ( title: 'b', con: block, ),
  ( title: 'in', con: inline, ),
  ( title: 'in-b', con: inline-block)
);
@for $i from 1 through length($displaylist) {
  $item: nth($displaylist, $i);
  $title: map-get(
    $map: $item,
    $key: title,
  );
  $con: map-get(
    $map: $item,
    $key: con,
  );
  .dis-#{$title} {
    display: $con;
  }
}


/* overflow
    visible	默认值。内容不会被修剪，会呈现在元素框之外。
    hidden	内容会被修剪，并且其余内容是不可见的。
    scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
    auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
    inherit	规定应该从父元素继承 overflow 属性的值。
*/

$overflowlist:[visible,hidden,scroll,auto,inherit];
@each $i in $overflowlist {
    .over-#{$i} {
        overflow: $i;
    }
    .over-y-#{$i} {
        overflow-y: $i;
    }
    .over-x-#{$i} {
        overflow-x: $i;
    }
}


/* word-spacing 注：指定段字之间的空间 */
@for $i from 1 through 80 {
  @if $i % 2==0 {
    .word-px-spac-#{$i} {
      word-spacing: $i + px;
    }
    .word-rem-spac-#{$i} {
      word-spacing: ($i/10) + rem;
    }
  }
}

/* word-break 在合适的点换行
    break-all	允许在单词内换行。
    keep-all	只能在半角空格或连字符处换行。
*/
$wordspacinglist: break-all, keep-all;
@each $i in $wordspacinglist {
  .word-#{$i} {
    word-break: $i;
  }
}

/* white-space 文本换行
    normal	默认。空白会被浏览器忽略。
    pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
    nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
    pre-wrap	保留空白符序列，但是正常地进行换行。
    pre-line	合并空白符序列，但是保留换行符。
    inherit	规定应该从父元素继承 white-space 属性的值。
*/
$whitespacelist: normal, pre, nowrap, pre-wrap, pre-line, inherit;
@each $i in $whitespacelist {
  .white-spc-#{$i} {
    white-space: $i;
  }
}


/* object-fit 对图片进行剪切，保留原始比例
 * fill	默认，不保证保持原有的比例，内容拉伸填充整个内容容器。	尝试一下 »
 * contain	保持原有尺寸比例。内容被缩放。	尝试一下 »
 * cover	保持原有尺寸比例。但部分内容可能被剪切。	尝试一下 »
 * none	保留原有元素内容的长度和宽度，也就是说内容不会被重置。	尝试一下 »
 * scale-down	保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。	尝试一下 »
 * initial	设置为默认值，关于 initial
 * inherit	从该元素的父元素继承属性。 关于 inherit
 */

$objList: fill, contain, cover, none, scale-down, initial, inherit;
@each $i in $objList {
  .obj-fit-#{$i} {
    object-fit: $i;
  }
}
